<style>
.a-link {color: red;}
.a-hover {
  color: #fff;
  background-color: red;
}
.a-visited {
  color: #000;
}
.a-active {
  color: red;
  text-decoration: underline;
}
.a-focus {
  color: red;
  border: 1px solid red;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div><a class="a-link">链接:link</a></div>
        <div><pre class="prettyprint"><code>a:link {color: red}</code></pre></div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div><a class="a-hover">链接:hover</a></div>
        <div><pre class="prettyprint"><code>a:hover {
  color: #fff;
  background-color: red;
}</code></pre></div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div><a class="a-visited">链接:visited</a></div>
        <div><pre class="prettyprint"><code>a:visited {color: #000}</code></pre></div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div><a class="a-active">链接:active</a></div>
        <div><pre class="prettyprint"><code>a:active {
  color: red;
  text-decoration: underline;
}</code></pre></div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div><a class="a-focus">链接:focus</a></div>
        <div><pre class="prettyprint"><code>a:focus {
  color: red;
  border: 1px solid red;
}</code></pre></div>
      </div>
    </div>
  </div>
</div>
